<template>
  <div class="module-management">
    <h2>模块管理</h2>
    <div class="form-group">
      <label for="moduleName">模块名称:</label>
      <input type="text" id="moduleName" v-model="newModule.name" required>
    </div>
    <div class="form-group">
      <label for="moduleDescription">模块描述:</label>
      <textarea id="moduleDescription" v-model="newModule.description" required></textarea>
    </div>
    <button @click="addModule">添加模块</button>
    <table>
      <thead>
        <tr>
          <th>模块名称</th>
          <th>模块描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="module in modules" :key="module.id">
          <td>{{ module.name }}</td>
          <td>{{ module.description }}</td>
          <td>
            <button @click="editModule(module)">编辑</button>
            <button @click="deleteModule(module.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      newModule: {
        name: '',
        description: ''
      },
      modules: [],
      projectId: null
    };
  },
  created() {
    this.getProjectIdFromUrl();
  },
  methods: {
    getProjectIdFromUrl() {
      const urlParams = new URLSearchParams(window.location.search);
      this.projectId = urlParams.get('project_id');
      this.fetchModules();
    },
    async fetchModules() {
      try {
        const response = await axios.get(`/api/modules?project_id=${this.projectId}`);
        this.modules = response.data;
      } catch (error) {
        console.error('Failed to fetch modules:', error);
      }
    },
    async addModule() {
      try {
        await axios.post('/api/modules/save', { ...this.newModule, project_id: this.projectId });
        this.fetchModules(); // 刷新模块列表
        this.newModule = { name: '', description: '' };
      } catch (error) {
        console.error('Failed to add module:', error);
      }
    },
    async editModule(module) {
      this.newModule = { ...module };
      try {
        await axios.put('/api/modules/update', { ...this.newModule, project_id: this.projectId });
        this.fetchModules(); // 刷新模块列表
      } catch (error) {
        console.error('Failed to edit module:', error);
      }
    },
    async deleteModule(id) {
      if (confirm('确定要删除此模块吗？')) {
        try {
          await axios.delete(`/api/modules/${id}`);
          this.fetchModules(); // 刷新模块列表
        } catch (error) {
          console.error('Failed to delete module:', error);
        }
      }
    }
  }
}
</script>

<style scoped>
.module-management {
  max-width: 600px;
  margin: auto;
}

.form-group {
  margin-bottom: 1em;
}

label {
  display: block;
  margin-bottom: 0.5em;
}

input,
textarea {
  width: 100%;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 0.5em 1em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.5em;
  border: 1px solid #ccc;
}
</style>